<?php
    if(C('LAYOUT_ON')) {
        echo '{__NOLAYOUT__}';
    }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>跳转提示</title>
    <style type="text/css">
        * {
            font-family: "微软雅黑", "宋体", Arial, sans-serif;
            font-size: 12px;
            margin: 0;
            padding: 0;
        }

        .m-loading-icon {
            width: 100%;
            height: 100%;
            position: fixed;
            display: block;
            z-index: 9999;
            background: #FFF;
            opacity: 1;
        }

        .m-loading-icon .center {
            top: -30%;
            left: 0;
            position: absolute;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 142px;
            height: 180px;
            font-size: 1em;
            text-align: center;
            z-index: 100;
        }

        .m-loading-icon .spinner {
            position: relative;
            top: 10px;
            left: 40px;
        }

        .m-loading-icon .cubemove {
            -webkit-animation: cubemove 2s infinite ease-in-out;
        }

        .m-loading-icon .cube1, .m-loading-icon .cube2, .m-loading-icon .cube3, .m-loading-icon .cube4 {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 0;
            left: 0;
        }

        .m-loading-icon .cube1 {
            -webkit-animation-delay: 0s;
            background: #1F8DD6;
        }

        .m-loading-icon .cube2 {
            -webkit-animation-delay: -0.5s;
            background-color: #FBB44C;
        }

        .m-loading-icon .cube3 {
            -webkit-animation-delay: -1s;
            background-color: #FC797A;
        }

        .m-loading-icon .cube4 {
            -webkit-animation-delay: -1.5s;
            background-color: #2ABB9B;
        }

        @-webkit-keyframes cubemove {
            25% {
                -webkit-transform: translateX(42px) translateY(0px) rotate(-90deg) scale(0.5);
            }
            50% {
                -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
            }
            75% {
                -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
            }
            100% {
                -webkit-transform: rotate(-360deg);
            }
        }

        .m-loading-icon .loading-message {
            width: 120px;
            text-align: center;
            font-family: "微软雅黑", "宋体", Arial, sans-serif;
            font-size: 14px;
            font-weight: bold;
            position: absolute;
            bottom: 0;
            padding: 10px;
            border-radius: 4px;
            line-height: 24px;
        }

        .success {
            color: #a94442;
            border: 1px solid #ebccd1;
            background: #f2dede;
        }

        .error {
            color: #3c763d;
            border: 1px solid #d6e9c6;
            background: #dff0d8;
        }
    </style>
</head>
<body>
<div class="system-message">
    <div class="m-loading-icon">
        <div class="center">
            <div class="spinner">
                <div class="cubemove cube1"></div>
                <div class="cubemove cube2"></div>
                <div class="cubemove cube3"></div>
                <div class="cubemove cube4"></div>
            </div>
            <?php if(isset($message)) { ?>
            <div class="loading-message success">
                <p><?php echo($message); ?></p>

                <p class="jump">
                    页面自动 <a id="href" href="<?php echo($jumpUrl); ?>">跳转</a><br/>
                    等待时间： <b id="wait"><?php echo($waitSecond); ?></b>
                </p>
            </div>
            <?php }else{ ?>
            <div class="loading-message error">
                <p><?php echo($error); ?></p>

                <p class="jump">
                    页面自动 <a id="href" href="<?php echo($jumpUrl); ?>">跳转</a><br/>
                    等待时间： <b id="wait"><?php echo($waitSecond); ?></b>
                </p>
            </div>
            <?php } ?>
        </div>
    </div>
</div>
<script type="text/javascript">
    (function () {
        var wait = document.getElementById('wait'), href = document.getElementById('href').href;
        var interval = setInterval(function () {
            var time = --wait.innerHTML;
            if (time <= 0) {
                location.href = href;
                clearInterval(interval);
            }
        }, 1000);
    })();
</script>
</body>
</html>
